<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserList">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="openAddDialog" style="margin: 10px 0">新增用户</el-button>

      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="username" label="用户名"/>
        <el-table-column prop="real_name" label="姓名"/>
        <el-table-column prop="email" label="邮箱"/>
        <el-table-column prop="phone" label="手机"/>
        <el-table-column prop="status" label="状态" :formatter="formatStatus"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="editUser(scope.row)">编辑</el-button>
            <el-button type="danger" link size="small" @click="deleteUser(scope.row.user_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogVisible" title="新增用户" width="30%">
        <el-form-item label="用户名称:" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="用户密码:" prop="password">
          <el-input v-model="userForm.password" placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="真实名字:" prop="realName">
          <el-input v-model="userForm.realName" placeholder="请输入真实名字"/>
        </el-form-item>
        <el-form-item label="邮箱地址:" prop="email">
          <el-input v-model="userForm.email" placeholder="请输入邮箱地址"/>
        </el-form-item>
        <el-form-item label="手机号码:" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入手机号码"/>
        </el-form-item>
        <el-form-item label="用户头像:" prop="avatar">
          <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              accept="image/*"
          >
            <!-- 上传按钮内容：显示图片 or “选择文件” -->
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>

          <!-- 备注说明 -->
          <div style="font-size: 12px; color: #999; margin-top: 5px;">
            支持 JPG/PNG 格式，最大 2MB
          </div>
        </el-form-item>

        <el-form-item label="系统标识:" prop="systemCode">
          <el-select v-model="userForm.systemCode" placeholder="请选择所属系统">
            <el-option
                v-for="item in systemOptions"
                :key="item.systemCode"
                :label="item.systemName"
                :value="item.systemCode"
            />
          </el-select>
        </el-form-item>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddModule">确定</el-button>
        </template>
      </el-dialog>
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :total="total"
          @current-change="getUserList"
      />
    </el-card>
  </div>
</template>

<script>
import {getSystemList} from '@/api/system.js'

export default {
  data() {
    return {
      searchForm: {
        username: ''
      },
      userList: [],
      systemOptions: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      userForm: {
        username: '',//用户名
        password: '',//加密后的密码
        realName: '',//真实姓名
        email: '',//电子邮箱
        phone: '',//手机号码
        avatar: '',//头像URL
        systemCode: ''//所属系统标识
      }
    }
  },
  methods: {
    getUserList() {
      console.log('查询用户列表', this.searchForm)
    },
    handleAddModule() {
      console.log(this.userForm)
    },
    resetSearch() {
      this.searchForm.username = ''
      this.getUserList()
    },
    formatStatus(row) {
      return row.status === 1 ? '启用' : '禁用'
    },
    openAddDialog() {
      console.log('打开新增用户弹窗')
      getSystemList({}).then(res => {
        this.systemOptions = res.data.list
      })
      this.dialogVisible = true;

    },
    editUser(row) {
      console.log('编辑用户', row)
    },
    deleteUser(userId) {
      console.log('删除用户', userId)
    },
    handleAvatarSuccess(response, file) {
      // 假设接口返回上传后图片的 URL
      this.userForm.avatar = response.url
    },
    beforeAvatarUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片类型文件')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB')
      }

      return isImage && isLt2M
    }
  }
}

</script>
<style>
.avatar-uploader .el-upload {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
